<template>
  <el-form class="form" :model="filters" :inline="true" size="mini">
    <div class="form-btn">
      <el-button size="mini" type="primary" @click="handleSearch">查询</el-button>
      <el-button size="mini" @click="handleReset">清空</el-button>
    </div>
    <el-row :gutter="20">
      <template v-for="item in options">
        <el-col v-if="item === 'estate'" :lg="4" :md="6" :sm="7" :key="item">
          <el-form-item>
            <el-autocomplete
              v-model="filters.estate"
              :fetch-suggestions="loadSearchEstate"
              placeholder="请输入小区名称"
              @select="handleSelectSearchEstate"
              clearable
              @clear="handleEstateClear"
              @input="handleEstateInput"
            ></el-autocomplete>
          </el-form-item>
        </el-col>

        <el-col v-if="item === 'lastPublishDate'" :lg="6" :md="7" :sm="10" :key="item">
          <el-form-item>
            <el-date-picker
              v-model="filters.lastPublishDate"
              type="daterange"
              range-separator="至"
              start-placeholder="上次发房日期"
              end-placeholder="上次发房日期"
              :editable="false"
              value-format="timestamp"
              :default-time="['00:00:00', '23:59:59']"
              @change="handleDateClear"
              style="width: 100%;"
            ></el-date-picker>
          </el-form-item>
        </el-col>

        <el-col v-if="item === 'updateTime'" :lg="6" :md="7" :key="item">
          <el-form-item>
            <el-date-picker
              v-model="filters.updateTime"
              type="daterange"
              range-separator="至"
              start-placeholder="更新日期"
              end-placeholder="更新日期"
              :editable="false"
              value-format="timestamp"
              :default-time="['00:00:00', '23:59:59']"
              @change="handleDateClear"
              style="width: 100%;"
            ></el-date-picker>
          </el-form-item>
        </el-col>

        <el-col v-if="item === 'houseSalesStatus'" :lg="4" :key="item">
          <el-form-item>
            <el-select v-model="filters.houseSalesStatus" placeholder="房源状态">
              <el-option
                v-for="dict in houseSalesStatusOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </template>
    </el-row>
  </el-form>
</template>

<script>
export default {
  name: 'HouseListFilter',

  components: {},

  props: {
    filters: {
      type: Object,
      default() {
        return {};
      }
    },
    options: {
      type: Array,
      default() {
        return [];
      }
    }
  },

  data() {
    return {};
  },

  computed: {},

  watch: {},

  beforeMount() {},

  mounted() {},

  methods: {
    // ------------------handle------------------
    // 搜索列表
    handleSearch() {
      this.$emit('change');
      //   this.pushList(1);
    },
    // 重置全部筛选
    handleReset() {
      //   this.filters.estate = '';
      //   this.filters.estateId = '';
      //   this.filters.lastPublishDate = [];
      //   this.filters.updateTime = [];
      //   this.pushList(1);
      this.$emit('change', 'reset');
    },
    // 清除日期筛选
    handleDateClear(e) {
      if (e === null) {
        this.pushList(1);
      }
    },
    // 搜索小区
    handleEstateInput() {
      if (this.filters.estateId) {
        this.filters.estateId = '';
      }
    },
    // 选择小区
    handleSelectSearchEstate(e) {
      this.filters.estateId = e.id || '';
      this.filters.estate = e.value || '';
    },
    // 清除小区筛选
    handleEstateClear() {
      this.filters.estate = '';
      this.filters.estateId = '';
      this.pushList(1);
    },
    // ------------------function------------------
    // 加载小区列表
    async loadSearchEstate(query, cb) {
      try {
        if (!(query && query.trim())) {
          cb([]);
          return;
        }
        let res = await this.$api.likeResblockName({
          keyWord: query,
          page: 1,
          pageSize: 40
        });
        let result = res.content.rows.map((item) => {
          return { value: item.resblockName, id: item.resblockId };
        });
        cb(result);
      } catch (error) {
        cb([]);
        console.log('error', error);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.form {
  position: relative;
  padding: 20px 120px 5px 20px;
  border-radius: 10px;
  background-color: #fff;

  .form-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1;
  }
}
</style>
